<template>
    <div>
    <div  class="shadow-drop-2-center box">
        <el-tabs type="border-card">
            <el-tab-pane label="关于" key="about">
                <p>有关学习的小技巧都在这里呀~</p>
                <p>前端后台都有哒~</p>
            </el-tab-pane>
            <el-tab-pane 
            v-for="lists in studyList" 
            :key="lists.id" 
            :label="lists.name">
                <div v-for="list in lists.child" :key="list.id">
                    <p>{{list.title}} : {{list.msg}}</p>
                    <el-divider></el-divider>
                </div>
            </el-tab-pane>
            <el-tab-pane label="添加" key="add">
                <addStudy />
            </el-tab-pane>
        </el-tabs>
    </div>
    </div>
</template>

<script>
    import { mapState} from 'vuex';
    import addStudy from './addStudy'
    import MeCard from '../../components/MeCard'
export default {
    name:'Study',
    components:{MeCard,addStudy},
    mounted() {
        this.$store.dispatch('studyAbout/studyList');
    },

    computed:{
        ...mapState('studyAbout',{
            studyList:(state)=>state.studyList
        }),
    },
}
</script>

<style scoped>
.el-tabs{
    height: 100%;
	background-color: transparent;
    overflow: auto;
}
.el-tab-pane{
    background-color: white;
    margin-left: 5%;
    width: 80%;
    padding-left:5%;
    padding-top: 2%;
} 
</style>